import React, { useEffect, useState } from 'react';
import { Modal, Form, Space, Steps, Alert } from 'antd';
import FormCondition from '@/components/FormCondition';
import { connect, history } from 'umi';
import { Button, Row, Col, notification } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
const { Step } = Steps;
const updateShare = (props) => {
  const { visible = false, onClose, loading, dispatch, handleCallback, cleanSelect, } = props;
  const { show = false, detail = {}, selectIdList = [], updateList = [] } = visible;
  const { } = detail;
  const [userList, setUserList] = useState([])
  const [list, setList] = useState([])
  const [form] = Form.useForm();
  useEffect(() => {
    if (show) {
      setList(updateList)
    }
    else {
      return setList([])
    }

  }, [show])
  // 确认提交
  let time = null
  const handleUpAudit = () => {
    form.validateFields().then((values) => {
      const { qrww } = values
      if (qrww === '确认无误') {
        dispatch({
          type: 'promoter/fakeChangeParent', payload: {
            ...values,
            idList: selectIdList,
          }, callback: () => {
            cleanSelect();
            handleCallback()
            onClose()
          }
        })
      } else {
        notification.warn({
          message: '温馨提示',
          description: `请输入确认无误后修改`,
        });
      }


    });
  };
  const formItemLayout = {
    labelCol: {
      sm: { span: 0 },
    },
    wrapperCol: {
      sm: { span: 0 },
    },
  };

  const fetchSearchData = (e) => {
    dispatch({
      type: 'promoter/fetchListSimplePromoter', payload: {
        keyword: e,
        page: 1,
        limit: 50,
        status: '1',
      }, callback: (e) => {
        setUserList(e.map(item => {
          return {
            ...item,
            usernameMobile: item.applyUsername + `(手机号：${item.applyMobile})`
          }
        }))
      }
    })

  }

  const formItems1 = [
    {
      label: '搜索邀请人',
      name: 'parentId',
      type: 'select',
      onSearch: (e) => {
        if (!e) {
          if (time) {
            clearTimeout(time)
          }
          setUserList([])
        } else {
          if (!time) {
            time = setTimeout(() => {
              fetchSearchData(e)
            }, 300)
          } else {
            clearTimeout(time)
            time = setTimeout(() => {
              fetchSearchData(e)
            }, 300)
          }

        }
      },
      onChange: (e, val) => {
        const { option } = val
        form.setFieldValue('parentName', option.applyUsername)
      },
      showArrow: false,
      filterOption: false,
      showSearch: true,
      select: userList,
      fieldNames: { label: 'usernameMobile', value: 'id' },
    },
    {
      label: '邀请人姓名',
      name: 'parentName',
      hidden: true,

    },


  ];
  const formItems2 = [
    {
      label: '确认无误',
      name: 'qrww',
      placeholder: "请输入确认无误"
    },



  ];
  const getColumns = [
    {
      title: '推广员昵称',
      dataIndex: 'applyUsername',
    },
    {
      title: '邀请人',
      dataIndex: 'parentUsername',
    },
    {
      title: '移除',
      dataIndex: 'id',
      render: (e) => {
        if (list.length === 1) {
          return '--'
        }
        else {
          return <Button type='link' onClick={() => {
            setList(list.filter(item => {
              return item.id !== e
            }))
          }}>移除</Button>
        }
      }
    },

  ];
  const modalProps = {
    title: '修改邀请人',
    width: 1200,
    visible: show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <Alert type="warning" message={<div>修改邀请人将影响推广员的收益关系，请与推广员沟通确认无误后再修改邀请人。</div>}></Alert>
      {/* <Space direction={'vertical'} style={{ display: 'flex', textAlign: 'center', justifyContent: 'center', width: '100%' }}>
        <FormCondition form={form} initialValues={{}} formItems={formItems}></FormCondition>
      </Space> */}
      <Steps
        direction="vertical"
        current={3}
      >
        <Step description={<TableDataBlock
          loading={loading}
          list={list}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          pagination={false}
        ></TableDataBlock>} title={`请核实所选推广员（已选 ${list.length} 人）`} >

        </Step>

        <Step description={<div>
          <FormCondition formItemLayouts={formItemLayout} form={form} initialValues={{}} formItems={formItems1}></FormCondition>
        </div>} title="选择新的邀请人" >
        </Step>
        <Step title="确认无误，完成修改" description={<FormCondition formItemLayouts={formItemLayout} form={form} initialValues={{}} formItems={formItems2}></FormCondition>}>

        </Step>
      </Steps>

    </Modal >
  );
};

export default connect(({ order, loading }) => ({
  loading: loading.effects['promoter/fakeCheckApplyPromoter'],
}))(updateShare);
;
